<template>
	<view class="page">
		<calendar ref="calendarRef" @initData="initDataFinish" @selectDayEmit="selectDayEmit"></calendar>
		<view class="colorTips">
			<view class="item">
				<view class="icon" style="background-color: #5ac725;">
				</view>
				可预约
			</view>
			<view class="item">
				<view class="icon" >
				</view>
				已预约
			</view>
		</view>
		<view class="menu" v-if="menuArr.length">
		
			<view class="row" v-for="(item,index) in menuArr" :key="index">
				<view class="label">
					{{item.mealName}}:
				</view>
				<view class="val" >
					<text v-for="(item2,index2) in item.mealArr" :key="index2">{{item2}}</text>
				</view>
			</view>
			
			<view class="row">
				<view class="label">
					预约:
				</view>
				<view class="input">
					  <u-checkbox-group
					            v-model="checkboxVal"
					            placement="row"
					            @change="checkboxChange"
					        >
					          <!--  <u-checkbox
					                :customStyle="{marginRight: '15rpx'}"
					                v-for="(item, index) in checkboxList"
					                :key="index"
					                :label="item.name"
					                :name="item.id"
					            > -->
								 <u-checkbox					                :customStyle="{marginRight: '15rpx'}"					                v-for="(item, index) in menuArr"					                :key="index"					                :label="item.mealName"					                :name="item.mealTypeId">					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit"  v-if="menuArr.length">
			提交预约
		</view>
		<u-empty style="margin-top: 20rpx;" mode="list" v-if="!menuArr.length" text="没发布菜品,不可预约!">
		</u-empty>
		
	</view>
</template>

<script>
	import {getMonthTbAdvanceOrderApi,getMealtypeApi,moreSaveOrderApi} from '@/common/api/commonApi/commonApi.js'
	import calendar from './calendar.vue'
	export default {
		data() {
			return {
				monthObj:'',
				checkboxVal:[],
				checkboxList:[ ],
				dateObj : '',
				menuArr:[],
				dayArr : [],
				allDayMenuArr:[],
				orderList : [],
				today : '',
				merchNo:''
			}
		},
		methods: {
			selectDayEmit(e){
				console.log(e);
				this.dateObj = e.date
				this.menuArr = this.allDayMenuArr.filter(item=>{
					return item.mealDate == this.dateObj
				})
				this.menuArr.forEach(item=>{
					item.mealName = this.findDir(item.mealTypeId)
					item.mealArr = item.dishNames.split(',')
				})
				let tempArr = this.orderList.filter(item=>{
					return item.eatDate == this.dateObj
				})
				this.checkboxVal = []
				tempArr.forEach(item2=>{
					this.checkboxVal.push(item2.mealTypeId)
				})
				
			},
			findDir(id){
				let str = ''
				this.checkboxList.forEach(item=>{
					if(item.id==id){
						str = item.name
					}
				})
				return str
			},
			checkboxChange(e){
				console.log(e);
			},
			async initDataFinish(e){
				console.log(e);
				let {dayArr,dateObj} = e
				this.dayArr = dayArr
				this.monthObj = dateObj.monthObj
				this.dateObj = dateObj.today
				this.menuArr = []
				this.allDayMenuArr = []
				this.orderList = []
				await this.getMealtype()
				this.getMonthInfo()
			},
			submit(){
				let bool = this.tab(this.dateObj,this.today)
				if(!bool) return this.setMessage('今天及以前的日期不能预约！')
				let tempArr = this.orderList.filter(item=>{
					return this.dateObj == item.eatDate
				})
				let oldTempArr = []
				if(tempArr.length){
					tempArr.forEach(item=>{
						oldTempArr.push(item.mealTypeId)
					})
				}
				
				moreSaveOrderApi({
					newMealTypeIds : this.checkboxVal.join(','),
					oldMealTypeIds : oldTempArr.length ? oldTempArr.join(',') : '' ,
					eatDate : this.dateObj,
					merchNo : this.merchNo
				}).then(res=>{
					this.getMonthInfo().then(res=>{
						this.setMessage('操作成功')
					})
				})
			},
			initLateDate(){
				let date = new Date();
				let year = date.getFullYear();//
				let month = date.getMonth() + 1;
				month = month.toString().padStart(2,'0')
				let day = date.getDate();
				day = day.toString().padStart(2,'0')
				this.today = `${year}-${month}-${day}`
			},
			tab(date1,date2){
			    var oDate1 = new Date(date1);
			    var oDate2 = new Date(date2);
			    if(oDate1.getTime() > oDate2.getTime()){
			        console.log('第一个大');
					return true
			    } else {
					return false
			    }
			},
			getMonthInfo(){
				return getMonthTbAdvanceOrderApi(this.monthObj,{
					merchNo : this.merchNo
				}).then(res=>{
					if(res.mealschedule.length){
						res.mealschedule.forEach(item=>{
							item.mealDate = item.mealDate.split(' ')[0]
							this.dayArr.forEach(item2=>{
								if(item2.date == item.mealDate){
									item2.activeType = 1
								}
							})
						})
						this.allDayMenuArr = res.mealschedule
						this.menuArr = this.allDayMenuArr.filter(item=>{
							return item.mealDate == this.dateObj
						})
						this.menuArr.forEach(item=>{
							item.mealName = this.findDir(item.mealTypeId)
							item.mealArr = item.dishNames.split(',')
						})
					}
					if(res.orderList.length){
						res.orderList.forEach(item=>{
							item.eatDate = item.eatDate.split(' ')[0]
							this.dayArr.forEach(item2=>{
								if(item2.date == item.eatDate){
									item2.activeType = 2
								}
							})
						})
						this.orderList = res.orderList
						let tempArr = this.orderList.filter(item=>{
							return item.eatDate == this.dateObj
						})
						this.checkboxVal = []
						tempArr.forEach(item2=>{
							this.checkboxVal.push(item2.mealTypeId)
						})
					}
					console.log(this.dayArr);
					this.$refs.calendarRef.dayArr = []
					this.$refs.calendarRef.dayArr = this.dayArr
				})
			},
			getMealtype(){
				return getMealtypeApi({
					merchNo : this.merchNo
				}).then(res=>{
					this.checkboxList = res.mealtypeList
				})
			},
			
		},
		components: {
			calendar
		},
		onLoad({merchNo}) {
			this.merchNo = merchNo
			this.initLateDate()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	.colorTips{
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		width: 100%;
		padding-right: 30rpx;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			margin-left: 20rpx;
			.icon{
				background: #4089f0;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
	}
	.menu{
		border-top: 2rpx solid #ccc;
		.row{
			font-size: 32rpx;
			display: flex;
			.label{
				width: 150rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20rpx;
				color: #333;
			}
			.val{
				flex: 1;
				padding: 20rpx 0;
				text{
					padding: 20rpx;
				}
			}
			.input{
				padding: 20rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
	}
	
	.btn{
		background-color: #2979ff;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		width: 90%;
		margin: 30rpx auto;
		@include flexCenter;
		height: 80rpx;
	}
}
</style>
